{% extends 'web/layout/basic.html' %}
{% load static %}
{% block css %}
    <link rel="stylesheet" href="{% static 'css/account.css' %}">
    <style>
        .error-msg {
            color: red;
            font-size: 13px;
            position: absolute;
        }

        #imagecode {
            cursor: pointer
        }
    </style>
{% endblock %}

{% block title %}短信登录{% endblock %}
{% block content %}
    <div class="account">
        <div class="title">短信登录</div>
        <form method="post" id="form" novalidate>
            {% csrf_token %}
            {% for foo in form %}
                {% if foo.name == 'code' %}
                    <div class="form-group">
                    {#           {{ foo.id_for_label }}表示当你点击这个label时候对应的id就可以获取到input里面的内容 #}
                    <label for="{{ foo.id_for_label }}">{{ foo.label }}</label>
                    {#            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">#}
                    <div class="clearfix">
                        <div class="col-md-6" style="padding-left: 0">{{ foo }}<span
                                class="error-msg">{{ error }}</span></div>

                        <div class="col-md-6">
                            <img src="/image/code" id="imagecode" title="点击更换图片">
                        </div>
                        {
                    </div>
                {% else %}
                    <div class="form-group">
                        {#           {{ foo.id_for_label }}表示当你点击这个label时候对应的id就可以获取到input里面的内容 #}
                        <label for="{{ foo.id_for_label }}">{{ foo.label }}</label>
                        {#            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">#}
                        {{ foo }}
                        <span class="error-msg"> </span>
                    </div>
                {% endif %}
            {% endfor %}
            <div class="row">
                <div class="col-xs-3">
                    <input id='btnSubmit' type="submit" value="登 录" class="btn btn-primary">
                </div>
            </div>
        </form>
    </div>
{% endblock %}

{% block js %}
    <script>
        $(function () {
            $('#imagecode').click(function () {
                var oldSrc = $(this).attr('src'); // 获取之前地址
                $(this).attr('src', oldSrc + '?'); // 加上?组成新地址就可以重新请求了
            })
        })

    </script>
{% endblock %}